<template>
  <div class="content-body">
    <div class="content-row m-border-2  m-solid m-border-blink" style="background-color: #fff">
      <div class="number-wrapper " style="padding-left: 5px">
        <shift-time-card></shift-time-card>
      </div>
      <div style="padding: 9px 8px 8px 0 " class="content-row " >
      <div class="number-wrapper m-border-r-1 m-solid" style="margin:0 10px 0 7px;border-radius: 10px">
        <div class="number-desc color1">
          <icon-font icon-class="afl-gongzuohuizong" class="icont color1" style="margin-right: 10px"></icon-font>
          <span class="color1">JKJ{{ $t('wms.totalOutput') }}</span>
        </div>
        <div class="number color1">{{ data.arrayList.jkjOutPutQty || 0 }}<span style="font-size: 13px;padding-left: 3px">pcs</span></div>
      </div>
      <div class="number-wrapper m-border-r-2 m-solid" style="margin-right:10px;border-radius: 10px">
        <div class="number-desc">
          <icon-font icon-class="afl-gongzuohuizong" class="icont color3" style="margin-right: 10px"></icon-font>
          <span class="color3">PE{{ $t('wms.totalOutput') }}</span>
        </div>
        <div class="number color3">{{ data.arrayList.peOutPutQty || 0 }}<span style="font-size: 13px;padding-left: 3px">pcs</span>
        </div>
      </div>
      <div class="number-wrapper m-border-r-2 m-solid" style="margin-right:10px;border-radius: 10px">
        <div class="number-desc">
          <icon-font icon-class="afl-gongzuohuizong" class="icont color2" style="margin-right: 10px"></icon-font>
          <span class="color2">DR{{ $t('wms.totalOutput') }}</span>
        </div>
        <div class="number color2">{{ data.arrayList.drOutPutQty || 0 }}<span style="font-size: 13px;padding-left: 3px">he</span>
        </div>
      </div>
      <div class="number-wrapper m-border-r-2 m-solid" style="margin-right:10px;border-radius: 10px">
        <div class="number-desc">
          <icon-font icon-class="afl-gongzuohuizong" class="icont color4" style="margin-right: 10px"></icon-font>
          <span class="color4">{{ $t('wms.cartonInput') }}</span>
        </div>
        <div class="number color4">{{ data.arrayList.cartonInputQty || 0 }}<span style="font-size: 13px;padding-left: 3px">pcs</span></div>
      </div>
      <div class="number-wrapper m-border-r-2 m-solid" style="margin-right:10px;border-radius: 10px">
        <div class="number-desc">
          <icon-font icon-class="afl-gongzuohuizong" class="icont color5" style="margin-right: 10px"></icon-font>
          <span class="color5">{{ $t('wms.specificationInput') }}</span>
        </div>
        <div class="number color5">{{ data.arrayList.instructionInputQty || 0 }}<span style="font-size: 13px;padding-left: 3px">pcs</span></div>
      </div>
      <div class="number-wrapper m-border-r-2 m-solid" style="border-radius: 10px">
        <div class="number-desc">
          <icon-font icon-class="afl-gongzuohuizong" class="icont color6" style="margin-right: 10px"></icon-font>
          <span class="color6">{{ $t('wms.stickerInput') }}</span>
        </div>
        <div class="number color6">{{ data.arrayList.pasterInputQty || 0 }}<span style="font-size: 13px;padding-left: 3px">pcs</span></div>
      </div>
      <div style="clear:both;"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch, onMounted, defineProps } from 'vue'
import iconFont from '@/components/IconFont/iconFont'
import { getJJGTabulateData, getShiftTime } from '@/api/mesApi'
import shiftTime from '@/hooks/shiftTime'
import ShiftTimeCard from '@/components/mes/common/shiftTimeCard.vue'

const { shiftCode, shiftDate } = shiftTime()

const data = reactive({
  arrayList: {},
  period: [],
  classes: ''
})

const props = defineProps({
  classes: { type: String },
  period: { type: Array }
})

watch(() => [props.classes, props.period], () => {
  console.log(props.classes, props.period)
  data.classes = props.classes
  data.period = props.period
  if (data.period[0] !== undefined && data.period[0].length === undefined) {
    data.period[0] = data.period[0].toLocaleDateString()
    data.period[1] = data.period[1].toLocaleDateString()
  }
  getJJGTabulateDataList()
})

onMounted(() => {
  getJJGTabulateDataList()
  setTime()
})

const getJJGTabulateDataList = () => {
  getJJGTabulateData({
    mesProduceDate: data.period[0] || '',
    mesProduceDate1: data.period[1] || '',
    shiftCode: data.classes === 'All' ? 'All' : data.classes
  }).then(function (res) {
    data.arrayList = res.data
  })
}
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await getJJGTabulateDataList()
  }, 6000)
}
</script>

<style scoped lang="scss">
.color1 {
  color: #659F2C;
}

.color2 {
  color: #37886C;
}

.color3 {
  color: #409EFF;
}

.color4 {
  color: #7656C0;
}

.color5 {
  color: #e94f12;
}

.color6 {
  color: #a05a0b;
}

.content-body {
  height: 100%;

  .content-row {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: space-around;
    overflow: hidden;
    border-radius: 10px;
  }

  .number-wrapper {
    //box-shadow: 5px 5px 5px #cecece;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    padding: 10px 0  10px 0 ;
    //box-sizing: border-box;
    width: 16.6%;
    height: 100%;
    align-self: center;
    background-color: #fff;
    border-color: #e0e3e9;
    .iconfont {
      font-size: 18px;
    }

    .number-desc {
      color: rgb(153, 153, 153);
      font-weight: 600;
      font-size: 17px;
      width: 100%;
      line-height: 30px;
      overflow: hidden;
    }

    .number {
      width: 100%;
      font-size: 22px;
      line-height: 30px;
      font-weight: 600;
    }
  }

  .number-wrapper:last-child {
    margin-right: 0;
  }
}
</style>
